<template>
	<div class="thePage">
		<div class="pg-page">
			<!-- 被企业使用 -->
			<cube-form :model="enterprise" :options="options" @validate="onValidate" @submit="onSubmit" @reset="onReset">
				<!-- 企业名称 -->
				<cube-form-item :field="fields.entName" />
				<!-- 企业地址 -->
				<cube-form-item :field="fields.entAddress" />
				<!-- 企业电话 -->
				<cube-form-item :field="fields.entTel" />
				<!-- 企业信用代码 -->
				<cube-form-item :field="fields.creditCode" />
				<!-- 所属行业 -->
				<cube-form-item :field="fields.industry" />

				<!-- 企业所在地   省  市  区 -->
				<cube-form-item :field="fields.entAreaCode">
					<div class="flex-between" @click="showAddressAreaPicker">
						<div class="area-input">{{ addressAreaText }}</div>
						<div class="address-area-icon"><i class="cubeic-home"></i></div>
					</div>
				</cube-form-item>
				<!-- 企业规模 -->
				<cube-form-item :field="fields.entScale" />

				<!-- 企业简介 -->
				<cube-form-item :field="fields.intro" class="cube-form-none-border"></cube-form-item>

				<cube-textarea class="content" autoExpand v-model="enterprise.intro" placeholder="请输入企业简介"></cube-textarea>

				<div class="tips flex-right">带*为必填选项</div>
				<cube-form-item :field="fields.submit" />
			</cube-form>

			<!-- 弹窗 -->
			<dialog-confirm :visible="visiblePopup" btnText="返回" content="提交已更改" :onConfirm="handleConfirm"></dialog-confirm>
		</div>
	</div>
</template>

<script>
let chineseReg = /^[\u4e00-\u9fa5]+$/;
let studentNumberReg = /^\d{10}$/; //学生学号

import { provinceList, cityList, areaList } from '@/utils/area.js';
const addressData = provinceList;
addressData.forEach(province => {
	province.children = cityList[province.value];
	province.children.forEach(city => {
		city.children = areaList[city.value];
	});
});
const industryList = ['居民服务和其他企业', '科学研究/技术服务和地址勘测业', '信息传输/计算机服务和软件业', '水利/环境和公共设施管理业', '其他'];
const entScaleList = ['200人以上', '51-200人', '1-50人'];
import DialogConfirm from '@/components/DialogConfirm.vue';

export default {
	name: 'CompanyAdd',
	components: {
		DialogConfirm
	},
	data() {
		return {
			enterprise: {
				entName: '甬港现代工程有限公司', //企业名称
				entAddress: '浙江省宁波市镇海区中观西路203号', //工作地址
				entTel: '0574-83676523', //企业电话
				creditCode: '91330211573687903j', //企业信用代码
				industry: '信息传输/计算机服务和软件业', //所属行业

				entAreaCode: '', //企业所在地   省  市  区
				entScale: '51-200人', // 企业规模

				intro: '宁波创艺信息科技有限公司于2011年06月01日在宁波市工商行政管理局镇海分局登记成立。法定代表人宁可，公司经营范围包括计算机软硬件、通讯设备及技术的研发、维护等。.' // 企业简介
			},

			fields: {
				entName: {
					type: 'input',
					modelKey: 'entName',
					label: '企业名称：',
					props: {
						placeholder: '请输入企业名称'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				entAddress: {
					type: 'input',
					modelKey: 'entAddress',
					label: '企业地址：',
					props: {
						placeholder: '请输入企业地址'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				entTel: {
					type: 'input',
					modelKey: 'entTel',
					label: '企业电话：',
					props: {
						placeholder: '请输入企业电话'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				creditCode: {
					type: 'input',
					modelKey: 'creditCode',
					label: '企业信用代码：',
					props: {
						placeholder: '请输入企业信用代码'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				industry: {
					type: 'select',
					modelKey: 'industry',
					label: '所属行业：',
					props: {
						options: industryList
					},
					rules: {
						required: true
					}
				},

				entAreaCode: {
					modelKey: 'entAreaCode',
					label: '企业所在地：',
					rules: {
						required: true
					},
					messages: {
						required: '请选择'
					}
				},

				entScale: {
					type: 'select',
					modelKey: 'entScale',
					label: '企业规模：',
					props: {
						options: entScaleList
					},
					rules: {
						required: true
					}
				},

				intro: {
					modelKey: 'intro',
					label: '企业简介：',
					props: {
						placeholder: '请输入企业简介'
					},
					rules: {
						required: true
					},
					debounce: 100
				},

				submit: {
					type: 'submit',
					label: '保存',
					props: {
						primary: true
					}
				},
				reset: {
					type: 'reset',
					label: '重置',
					props: {
						primary: true
					}
				}
			},

			options: {
				scrollToInvalidField: true,
				layout: 'standard' //classic standard fresh,
			},

			addressAreaText: '省 / 市 / 区',
			addressSelectedIndex: [],

			visiblePopup: false //提交确认弹窗显示
		};
	},
	methods: {
		//点击提交按钮
		onSubmit(e) {
			e.preventDefault();
			console.log('submit', e);
			if (e.isTrusted == false) return;

			this.visiblePopup = true;
		},
		onValidate(result) {
			this.validity = result.validity;
			this.valid = result.valid;
			console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex);
		},
		onReset(e) {
			console.log('reset', e);
		},

		showAddressAreaPicker() {
			if (!this.addressAreaPicker) {
				this.addressAreaPicker = this.$createCascadePicker({
					title: '请选择地址',
					data: addressData,
					// selectedIndex: this.addressSelectedIndex, //设置初始默认地址选择
					onSelect: (selectedVal, selectedIndex, selectedText) => {
						this.addressAreaText = selectedText.join('/');
						this.addressSelectedIndex = selectedIndex;
						this.enterprise.entAreaCode = selectedVal;
					}
				});
			}
			this.addressAreaPicker.show();
		},

		//处理弹框确认按钮回调
		handleConfirm() {
			this.visiblePopup = false;
			this.$router.push({ name: 'enterpriseHome' });
		}
	}
};
</script>

<style lang="less" scoped>
.pg-page {
	margin: 30px 20px;
}

/deep/.cube-form-label {
	width: unset;
	font-size: 14px;
	font-weight: 500;
	color: #333333;
	line-height: 12px;
}
.area-input,
.pg-page /deep/.cube-input-field {
	font-size: 14px;
	font-weight: 500;
	color: #b0b0b0;
	line-height: 12px;
}

/deep/.cube-select-icon {
	border-color: #ffb651 transparent transparent transparent;
	border-width: 8px 8px 0px 8px;
}

.cube-form-none-border::after {
	border: none;
}
.content {
	margin: 0 20px;
	padding: 10px !important;
	&/deep/.cube-textarea {
		color: #b0b0b0;
	}
}
.address-area-icon {
	margin-right: 8px;
	color: #ffb651;
	font-size: 18px;
}

.tips {
	text-align: right;
}
</style>
